<template>
<div class="contai-box">
  <section class="container">
      <filter-tab :hotelOptions="options" @FilterList="res => List = res" :start="page"></filter-tab>
      <filter-list :coverList="List"></filter-list>
      <filter-page :total="List.total" @pageChange="handlepage"></filter-page>
  </section>
  <div style="display:none">{{seacth}}</div>
</div>
  
</template>

<script>
import FilterTab from './FilterTab'
import FilterList from './FilterList'
import FilterPage from './FilterPage'
export default {
  props:['searchList'],
  data() {
    return {
      page:null,
      options:{},
      List:{}
    }
  },
  computed:{
    seacth() {
      this.List = this.searchList
      return this.searchList
    }
  },
  components: {
    FilterTab,
    FilterList,
    FilterPage
  },
  methods:{
    async hotelOptions() {
      const res = await this.$axios.get('/hotels/options')
      this.options = res.data.data  
    },
    handlepage(res) {
     this.page = res
    }
  },
  created() {
    this.hotelOptions()
  }
};
</script>

<style scoped lang="less">
.container {
  width: 1000px;
  margin: 0 auto;
}
 .contai-box{
    word-break: break-all;
    word-wrap: break-word;
    position: relative;
}

</style>